<template>
  <div>
    <div class="nav-topbar">
      <div class="container clearfix">
        <ul class="ul-nav">
          <li><a href="//www.mi.com/index.html">小米商城</a></li>
          <li>|</li>
          <li><a href="//www.miui.com/" target="_blank">MIUI</a></li>
          <li>|</li>
          <li><a href="//iot.mi.com" target="_blank">IoT</a></li>
          <li>|</li>
          <li><a href="//i.mi.com/" target="_blank">云服务</a></li>
          <li>|</li>
          <li><a href="//airstar.com/home" target="_blank">天星数科</a></li>
          <li>|</li>
          <li><a href="//youpin.mi.com/" target="_blank">有品</a></li>
          <li>|</li>
          <li><a href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a></li>
          <li>|</li>
          <li><a href="//qiye.mi.com/" target="_blank">企业团购</a></li>
          <li>|</li>
          <li>
            <a href="//www.mi.com/aptitude/list/?id=88" target="_blank"
              >资质证照</a
            >
          </li>
          <li>|</li>
          <li>
            <a href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
          </li>
          <li>|</li>
          <li>
            <a href="//www.mi.com/appdownload/" target="_blank" class="app"
              >下载app

              <!-- <div class="qrcode">
                <img src="./img/download.png" />
                <span>小米商城app</span>
              </div> -->
            </a>
          </li>
          <li>|</li>
          <li>
            <a href="//xiaomishare.mi.com/?from=micom" target="_blank"
              >智能生活</a
            >
          </li>
          <li>|</li>
          <li>
            <a href="javascript:;" class="J_siteGlobalRegion"
              >Select Location</a
            >
          </li>
        </ul>
        <div class="shop-cart">
          <router-link to="/cart">
            <span class="icon-cart"></span>

            购物车({{ cartCount }})</router-link
          >
        </div>

        <ul class="right-info">
          <!-- 没有用户名：未登录 -->

          <!-- 登录了 -->
          <span v-if="!username">
            <li>
              <router-link to="/login">登录</router-link>
            </li>
            <li>|</li>
            <li>
              <router-link class="register" to="/register"
                >免费注册</router-link
              >
            </li>
          </span>
          <span v-else>
            <li>
              {{ username }}
            </li>
            <li>|</li>
            <li>
               <a href="javascript:;"   @click="logout">退出</a>
            </li>     <li>|</li>
            <li>
            <router-link to="/order/confirm">订单确认</router-link>
            </li>
             <li>|</li>
             <li>
            <router-link to="/order/list">我的订单</router-link>
            </li>
          </span>
          <li>|</li>
          <li>
            <a
              href="//order.mi.com/site/login"
              data-agreient="true"
              data-login="true"
              >消息通知</a
            >
          </li>
          <li>|</li>
        </ul>
      </div>
    </div>

    <div class="nav-header">
      <div class="container clearfix">
        <h1 class="logoArea" title="xiaomi">
          <!-- router-link组件本省就是一个a标签 -->

          <a href="/" class="home"></a>
          <a href="/" class="mi"></a>
        </h1>

        <ul class="mi-list">
          <li>
            <a href="#">全部</a>
          </li>
          <li class="show-goods">
            <a href="#">小米手机</a>
            <div class="children">
              <ul>
                <li class="product" v-for="item in phoneList" :key="item.id">
                  <router-link :to="'/product/' + item.id"
                    ><div class="pro-img">
                      <img
                        :src="item.mainImage"
                        :alt="item.subtitle"
                        :title="item.subtitle"
                      />
                    </div>
                    <div class="pro-name">{{ item.name }}</div>
                    <div class="pro-price">
                      {{ item.price | currency }}
                    </div></router-link
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="show-goods">
            <a href="#">Redmi 红米</a>
          </li>
          <li class="show-goods">
            <a href="#">电视</a>
            <div class="children">
              <ul>
                <li class="product">
                  <a href="" target="_blank"
                    ><div class="pro-img">
                      <img
                        alt=""
                        v-lazy="'/imgs/nav-img/nav-3-1.jpg'"
                        lazy="loaded"
                      />
                    </div>
                    <div class="pro-name">小米壁画电视 65英寸</div>
                    <div class="pro-price">6999元</div></a
                  >
                </li>
                <li class="product">
                  <a href="" target="_blank"
                    ><div class="pro-img">
                      <img
                        alt=""
                        v-lazy="'/imgs/nav-img/nav-3-2.jpg'"
                        lazy="loaded"
                      />
                    </div>
                    <div class="pro-name">小米全面屏电视E55A</div>
                    <div class="pro-price">1999元</div></a
                  >
                </li>
                <li class="product">
                  <a href="" target="_blank"
                    ><div class="pro-img">
                      <img src="/imgs/nav-img/nav-3-3.png" lazy="loaded" />
                    </div>
                    <div class="pro-name">小米电视4A 32英寸</div>
                    <div class="pro-price">699元</div></a
                  >
                </li>
                <li class="product">
                  <a href="" target="_blank"
                    ><div class="pro-img">
                      <img
                        alt=""
                        data-src="/imgs/nav-img/nav-3-4.jpg"
                        src="/imgs/nav-img/nav-3-4.jpg"
                        lazy="loaded"
                      />
                    </div>
                    <div class="pro-name">小米电视4A 55英寸</div>
                    <div class="pro-price">1799元</div></a
                  >
                </li>
                <li class="product">
                  <a href="" target="_blank"
                    ><div class="pro-img">
                      <img
                        alt=""
                        data-src="/imgs/nav-img/nav-3-5.jpg"
                        src="/imgs/nav-img/nav-3-5.jpg"
                        lazy="loaded"
                      />
                    </div>
                    <div class="pro-name">小米电视4A 65英寸</div>
                    <div class="pro-price">2699元</div></a
                  >
                </li>
                <li class="product">
                  <a href="" target="_blank"
                    ><div class="pro-img">
                      <img
                        alt=""
                        data-src="/imgs/nav-img/nav-3-6.png"
                        src="/imgs/nav-img/nav-3-6.png"
                        lazy="loaded"
                      />
                    </div>
                    <div class="pro-name">查看全部</div>
                    <div class="pro-price">查看全部</div></a
                  >
                </li>
              </ul>
            </div>
          </li>
          <li class="show-goods">
            <a href="#">笔记本</a>
          </li>
          <li class="show-goods">
            <a href="#">家电</a>
          </li>
          <li class="show-goods"><a href="#">路由器</a></li>
          <li class="show-goods"><a href="#">智能硬件</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">社区</a></li>
          <!-- 创建一个弹出层 -->
          <div class="goods-info"></div>
        </ul>

        <form class="mi-search" action="#">
          <input class="search-inp" type="text" />
          <button class="search-btn">
            <i class="icon-search"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import requests from "@/api/ajax";
import { mapState } from "vuex";
// import requests from '@/api/ajax'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",

  data() {
    return {
      phoneList: [],
    };
  },
  computed: {
    // ...mapState(['username','cartCount'])
    ...mapState({
      username: (state) => state.home.username,
      cartCount: (state) => state.cart.cartCount,
    }),
    // username() {
    //   return this.$store.state.home.username
    // }
    // ,cartCount(){
    //   return this.$store.state.cart.cartCount
    // }
  },

  mounted() {
    this.getProductList();
 
  this.getCartCount()
    
     
  
  },

  methods: {
    getProductList() {
      requests
        .get("/products", {
          params: {
            categoryId: "100012",
            pageSize: 6,
          },
        })
        .then((res) => {
          console.log(res);
          this.phoneList = res.data.list;
        });
    },  
   getCartCount() {
      requests.get("/carts/products/sum").then((res=0) => {
        this.$store.dispatch("saveCartCount", res.data);
      });
    },
 
    logout() {
      requests.post("/user/logout").then(() => {
        this.$message.success("退出成功");
        this.$cookie.set("userId", "", { expires: "-1" });
        this.$store.dispatch("saveUserName", "");
        this.$store.dispatch("saveCartCount", 0);
        this.$router.push("/login")
      });
    },

  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/mixin";
@import "../../assets/scss/config";
@import "../../assets/scss/base";
.container {
  li {
    float: left;
  }
}
.nav-topbar {
  height: 40px;
  line-height: 40px;
  color: #b0b0b0;
  background: #333;
  .ul-nav,
  .shop-cart,
  .right-info {
    a {
      color: #b0b0b0;

      display: block;

      &:hover {
        color: #fff;
      }
    }
  }
  .ul-nav {
    float: left;
  }
  .shop-cart,
  .right-info {
    float: right;
  }
}

// 线==================================
.nav-topbar li:nth-child(even) {
  margin: 0px 5px;
}
// 字体==================================

.shop-cart {
  a {
    width: 120px;
    background-color: #ff6700;
    text-align: center;
    color: #fff !important;
    &:hover {
      background-color: #fff;
      color: #ff6700 !important;
    }
  }
  .icon-cart {
    // @include bgImg(16px,12px,'/imgs/icon-cart-checked.png');
    margin-right: 4px;
  }
}
.nav-header {
  .container {
    height: 112px;

    @include flex() // logo=================================
      // logo=================================
      .mi-list {
      padding-left: 200px;
      // float: left;

      /* width: 792px;被子元素内容撑开 */
    }
    .mi-list li {
      // float: left;

      /* 	background-color: red; */
    }
    .mi-list a {
      font-size: 16px;
      display: block;
      color: #333333;
      margin-right: 20px;

      font-weight: bold;
      &:hover {
        color: $colorA;
      }

      /* 	background-color: #0000FF; */
    }
    //==========================================
    .mi-search {
      margin: 22.5px 0;
      width: 296px;
      height: 50px;

      background-color: red;
    }

    .search-inp {
      box-sizing: border-box;
      width: 244px;
      height: 50px;
      float: left;

      border: 1px solid rgb(224, 224, 224);
      font-size: 16px;

      outline: none;
    }
    .search-inp:focus,
    .search-inp:focus + button {
      outline: 1.5px solid #ff6700;
    }
    /* 	在获取焦点时候他的兄弟元素选择器也变了 */
    .search-btn {
      float: left;
      height: 50px;
      width: 52px;

      .icon-search {
        @include bgImg(18px, 18px, "../../../public/imgs/icon-search.png")
          // background: url(../../../public/imgs/icon-search.png) no-repeat center;
;
      }

      background-color: #fff;

      border: 1px solid rgb(224, 224, 224);
    }

    .search-btn:hover {
      background-color: #ff6700;
      color: white;
      border: none;
    }
  }
}
.children {
  /* transition: 用于为样式设置过渡效果 */
  transition: all 0.3s;
  height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  z-index: 999;
  position: absolute;
  top: 112px;
  left: 0;
  border-top: 1px solid #eee;
  box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
  background: #fff;

  .product {
    float: left;
    width: 16.6%;
    height: 220px;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    position: relative;
    &:after {
      content: " ";
      display: block;

      background: $colorF;
      height: 100px;
      width: 1px;
      position: absolute;
      top: 28px;
    }
    &:first-child:after {
      display: none;
    }
  }
  a {
    display: block;
  }
  img {
    margin-top: 26px;
  }
  .pro-img {
    // height: 137px;
  }
  .pro-name {
    font-weight: bold;
    margin-top: 19px;
    margin-bottom: 8px;
    color: $colorB;
  }
  .pro-price {
    color: $colorA;
  }
}
.show-goods:hover .children,
.children:hover {
  height: 228px;
  opacity: 1;
  display: block;
}
</style>
